<template>
	<div>
		<div class="popup_body"></div>
		<div class="popup_body_top">
			<div class="popup_yi">
				<div style="display: flex;flex-direction: column;align-items: center;">
					<!-- img图片 1为活动提醒 2温馨提示 3 -->
					<img src="https://shopplatform-1302786294.cos.ap-guangzhou.myqcloud.com/shop_platform/images/20210416/9784a67c6ac543948a6c81b45c0d5f74.png"
						class="popup_img" v-show="sendMask.img == 1 && sendMask.img!=null" />
					<img src="https://shopplatform-1302786294.cos.ap-guangzhou.myqcloud.com/shop_platform/images/20210416/05a4f2600dea4bc1bc19440f4a5b8ba7.png"
						class="popup_img" v-show="sendMask.img == 2 && sendMask.img!=null" />
					<img src="https://shopplatform-1302786294.cos.ap-guangzhou.myqcloud.com/shop_platform/images/20210416/a625ffcb208346d38ac01fc8d842e1c9.png"
						class="popup_img" v-show="sendMask.img == 3 && sendMask.img!=null" />
				</div>
				<span class="popup_er" v-show="sendMask.title && sendMask.title!=null">{{sendMask.title}}</span>
				<div class="popup_san">
					<div class="popup_si" disabled v-html="sendMask.content"></div>
					<div class="popup_wu" @click="buttonNameClick" v-show="sendMask.buttonName">{{sendMask.buttonName}}
					</div>
					<div class="popup_wu" @click="confirmMaskClick" v-show="sendMask.confirm">{{sendMask.confirm}}</div>
					<div class="popup_liu" @click="cancelClick" v-show="sendMask.cancel">{{sendMask.cancel}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "sendMask",
		props: ['sendMask'],
		data() {
			return {}
		},
		methods: {
			cancelClick() {
				this.$emit('close');
			},
			confirmMaskClick() {
				this.$emit('goto');
			},
			buttonNameClick() {
				this.$emit('showClick');
			},
		},
	}
</script>

<style scoped>
	.popup_img {
		/* width: 142px; */
		height: 34px;
		margin-top: 24px;
	}

	.popup_liu {
		width: 214px;
		height: 30px;
		background: #FFFFFF;
		border: 1.5px solid #D90F18;
		border-radius: 15px;
		font-size: 15px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #A6A4A4;
		line-height: 30px;
		text-align: center;
		margin-top: 12px;
	}

	.popup_wu {
		width: 214px;
		height: 30px;
		background: linear-gradient(5deg, #D90F18, #F68B40);
		box-shadow: 0px 5px 10px 0px rgba(204, 34, 34, 0.52);
		border-radius: 15px;
		font-size: 15px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 30px;
		text-align: center;
		margin-top: 12px;
	}

	.popup_si {
		border: none;
		resize: none;
		font-size: 14px;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #333333;
		max-height: 220px;
		overflow: hidden;
		line-height: 24px;
		letter-spacing: 0.4px;
		margin: 20px 10px 0 10px;
		overflow: auto;
	}

	.popup_san {
		display: flex;
		flex-direction: column;
		margin: 15px 10px 15px 10px;
		align-items: center;
		justify-content: center;
		height: 100%;
		/* justify-content: center; */
		background: url('https://shopplatform-1302786294.cos.ap-guangzhou.myqcloud.com/shop_platform/images/20210416/91eb4fb73bf947d7adbf4e129ad387ed.png')no-repeat;
		background-size: 100% 100%;
	}

	.popup_er {
		font-size: 34px;
		color: #F2C62B;
		line-height: 34px;
		letter-spacing: 1px;
		margin: 20px 0 0 0;
		text-align: center;
		font-family: cursive;
	}

	.popup_body {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgb(0, 0, 0, 0.5);
		z-index: 99;
	}

	.popup_yi {
		display: flex;
		/* align-items: center; */
		background: url('https://shopplatform-1302786294.cos.ap-guangzhou.myqcloud.com/shop_platform/images/20210416/386f3e43ff7b44aa8230ad60ba7db026.png') no-repeat;
		background-size: 100% 100%;
		flex-direction: column;
		width: 315px;
		height: 435px;
	}

	.popup_body_top {
		position:fixed;
		top: 20%;
		left: 10%;
		bottom: 20%;
		right: 10%;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
